﻿<html>
<head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <link href="~/css/style.css" rel="stylesheet" />
    <script src="~/js/echarts.js"></script>
   
</head>
<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">工作台</a>
            </li>
        </ul>
    </div>

    <div class="mainbox">
        <div class="mainleft">
            <div class="leftinfo">
                <div class="listtitle">
                    统计信息
                </div>
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>0／1</h3>
                        <p>今日新增用户数（户）／总用户数（户）</p>
                    </div>
                </div>
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>256 / 1562</h3>
                        <p>总微信支付收费金额（元）/总收费金额（元）</p>
                    </div>
                </div>
                <div class="small-box bg-orange">
                    <div class="inner">
                        <h3>0／156</h3>
                        <p>今日抄表用户收费金额（元）／总抄表用户收费金额（元）</p>
                    </div>
                </div>
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>0／1</h3>
                        <p>今日无表用户收费金额（元）／总无表用户收费金额（元）</p>
                    </div>
                </div>
                <div class="small-box bg-maroon">
                    <div class="inner">
                        <h3>0／1</h3>
                        <p>今日IC卡用户收费金额（元）／总IC卡用户收费金额（元）</p>
                    </div>
                </div>
                <div class="small-box bg-lusr">
                    <div class="inner">
                        <h3>0／1</h3>
                        <p>总水费欠收用户数（户）/总水费欠收金额（元）</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="mainright">
            <div class="dflist">
                <div class="listtitle">
                    用户区域分布统计
                </div>
                <div id="main" style="width: 780px; height:400px; padding:10px 0px 0px 10px; "></div>
            </div>
        </div>
        <div class="navmain">
            <div class="listtitle">
                收费金额周统计信息
            </div>
            <div id="main2" style="width:100%; height:360px; padding:10px 0px 0px 0px;"></div>
        </div>
    </div>



</body>
<script type="text/javascript">
	var myChart=echarts.init(document.getElementById('main'));
	var option = {
    title : {
        text: '合作市自来水用户区域分布统计',
        subtext: '统计数据',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['中上线用户','中下线用户','东线用户','西线用户']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'中上线用户'},
                {value:310, name:'中下线用户'},
                {value:234, name:'东线用户'},
                {value:135, name:'西线用户'}
            ]
        }
    ]
};

	myChart.setOption(option);
</script>

<script type="text/javascript">
	var myChart=echarts.init(document.getElementById('main2'));
	var option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['抄表用户收费金额','无表收费金额','IC卡用户收费金额','微信支付收费金额','总收费金额']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'抄表用户收费金额',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'无表收费金额',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'IC卡用户收费金额',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'微信支付收费金额',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'总收费金额',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

	myChart.setOption(option);
</script>
</html>
